<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>旅游</title>
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/element/index.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/hzw-city-picker.css" />
		<script src="js/vue.min.js" type="text/javascript"></script>
		<script src="js/element/index.js" type="text/javascript"></script>
		<script src="js/jquery.min.js" type="text/javascript"></script>
		<script src="js/city-data.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/hzw-city-picker.min.js" type="text/javascript"></script>
		<script src="js/index.js" type="text/javascript"></script>
		<script src="js/common.js" type="text/javascript"></script>
	</head>

	<body>
		<div id="container">
			<!-- 顶部菜单 start -->
			<el-row type="flex" justify="center" id="top-menu">
				<el-col :sm="16" class="top-container">
					<el-row>
						<el-col :sm="14">
							<span>您好，请<a href="javascript:;">登录</a></span> &nbsp;&nbsp;
							<a href="javascript:;">免费注册</a>
						</el-col>
						<el-col :sm="10" class="top-nav">
							<div>
								<a href="javascript:;" class="text-green bold">我的订单</a>
							</div>
							<el-dropdown>
								<span class="el-dropdown-link">
							    	客户服务<i class="el-icon-arrow-down el-icon--right"></i>
							  	</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item>帮助中心</el-dropdown-item>
									<el-dropdown-item>在线服务</el-dropdown-item>
									<el-dropdown-item>人工申诉</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
							<el-dropdown>
								<span class="el-dropdown-link">
							    	合作中心<i class="el-icon-arrow-down el-icon--right"></i>
							  	</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item>网站联盟</el-dropdown-item>
									<el-dropdown-item>品牌合作</el-dropdown-item>
									<el-dropdown-item>合作加盟</el-dropdown-item>
									<el-dropdown-item>门票合作</el-dropdown-item>
									<el-dropdown-item>商旅合作</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
							<div id="app">
								&nbsp;&nbsp;
								<i class="fa fa-mobile-phone fa-2x text-green" style="position: absolute;top: 3px;"></i> &nbsp;&nbsp;
								<div class="bg-yellow text-center">
									<h3>扫码下载APP</h3>
									<img src="img/QRcode.png" />
								</div>
							</div>
							<div id="wechat">
								<i class="fa fa-weixin fa-lg text-green"></i>
								<div class="bg-yellow text-center">
									<h3>扫码关注公众号</h3>
									<img src="img/QRcode.png" />
								</div>
							</div>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<!-- 顶部菜单 end -->

			<!-- LOGO及搜索 start -->
			<el-row type="flex" justify="center" id="logo-bar">
				<el-col :sm="16" class="">
					<el-row>
						<el-col :sm="4" class="text-center">
							<img src="img/logo.png" />
						</el-col>
						<el-col :sm="2">
							<div id="city-box">
								<input type="text" id="city-choice" value="沈阳" readonly="readonly">
								<i class="fa fa-angle-down text-lg"></i>
							</div>
						</el-col>
						<el-col :sm="12" style="position: relative;">
							<div id="search-box">
								<el-input>
									<template slot="append">
										<el-button>搜 索</el-button>
									</template>
								</el-input>
							</div>
							<div id="hot-city">
								<span class="mini-block radius bg-lightblue float-r">
									大连
								</span>
								<span class="mini-block radius bg-lightblue float-r">
									沈阳
								</span>
							</div>
						</el-col>
						<el-col :sm="6">
							<img src="img/tel.png" style="width: 210px;display: block;margin: 0 auto;">
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<!-- LOGO及搜索 end -->

			<!-- menu start -->
			<el-row type="flex" justify="center" id="menu-bar" class="bg-green">
				<el-col :sm="16">
					<el-menu :default-active="activeIndex" background-color="#24D197" text-color="#eeeeee" mode="horizontal" @select="handleSelect">
						<el-menu-item index="1">首页</el-menu-item>
						<el-submenu index="2">
							<template slot="title">酒店</template>
							<el-menu-item index="2-1">国内酒店</el-menu-item>
							<el-menu-item index="2-2">国际酒店</el-menu-item>
							<el-menu-item index="2-3">民宿客栈</el-menu-item>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title">机票</template>
							<el-menu-item index="3-1">国内机票</el-menu-item>
							<el-menu-item index="3-2">国际机票</el-menu-item>
						</el-submenu>
						<el-menu-item index="4">火车票</el-menu-item>
						<el-submenu index="5">
							<template slot="title">汽车票</template>
							<el-menu-item index="5-1">汽车票首页</el-menu-item>
							<el-menu-item index="5-2">团队包车</el-menu-item>
						</el-submenu>
						<el-submenu index="6">
							<template slot="title">景点</template>
							<el-menu-item index="6-1">国内景点</el-menu-item>
							<el-menu-item index="6-2">周边游</el-menu-item>
							<el-menu-item index="6-3">主题景点</el-menu-item>
							<el-menu-item index="6-4">包团定制</el-menu-item>
						</el-submenu>
						<el-submenu index="7">
							<template slot="title">出境游</template>
							<el-menu-item index="7-1">出境首页</el-menu-item>
							<el-menu-item index="7-2">跟团游</el-menu-item>
							<el-menu-item index="7-3">自由行</el-menu-item>
							<el-menu-item index="7-4">签证</el-menu-item>
						</el-submenu>
						<el-menu-item index="8">签证</el-menu-item>
						<el-submenu index="9">
							<template slot="title">定制旅游</template>
							<el-menu-item index="9-1">包团定制</el-menu-item>
						</el-submenu>
					</el-menu>
				</el-col>
			</el-row>
			<!-- menu end -->

			<!-- 轮播图 start -->
			<el-row style="position: relative;" id="slide-box">
				<template>
					<el-carousel height="368px">
						<el-carousel-item v-for="item in 4" v-bind:style="{background : 'url(img/slide-' + item + '.jpg)'}">
						</el-carousel-item>
					</el-carousel>
				</template>
				<div id="silde-search" style="min-width: 420px;min-height: 358px; background: #000000; position: absolute;z-index: 99;top: 5px;left: 340px;">
					<el-tabs type="border-card" tab-position="left" style="height: 358px;">
						<el-tab-pane label="机票">
							<div class="z-tab-head">
								<ul>
									<li>
										<a href="javascript:;" class="active" data-target="#body-1-1">国内机票</a>
									</li>
									<li>
										<a href="javascript:;" data-target="#body-1-2">国际机票</a>
									</li>
								</ul>
							</div>
							<div class="z-tab-body">
								<ul>
									<li id="body-1-1" class="tab-li">
										<h4>行程类型</h4>
										<template>
											<el-radio-group v-model="guoneiRadio">
												<el-radio :label="1">单程</el-radio>
												<el-radio :label="2">往返</el-radio>
												<el-radio :label="3">联程</el-radio>
											</el-radio-group>
										</template>
										<br />
										<div>
											<div class="z-form-group">
												<label for="city1" class="block bold">出发地</label>
												<el-input id="city1" placeholder="请输入出发地" style="width: 120px;"></el-input>
											</div>
											<a href="javascript:;"><i class="fa fa-exchange" style="padding: 5px;"></i></a>
											<div class="z-form-group">
												<label for="city2" class="block bold">目的地</label>
												<el-input id="city2" placeholder="请输入目的地" style="width: 120px;"></el-input>
											</div>
											<br />
											<div class="z-form-group">
												<label for="date1" class="block bold">出发日期</label>
												<el-date-picker type="date" placeholder="选择日期">
												</el-date-picker>
											</div>
											<div style="margin-top: 10px;">
												<el-button type="warning" size="small">搜索</el-button>
											</div>
										</div>
									</li>
									<li id="body-1-2" class="tab-li hide">
										<h4>行程类型</h4>
										<template>
											<el-radio-group v-model="guojiRadio">
												<el-radio :label="1">单程</el-radio>
												<el-radio :label="2">往返</el-radio>
											</el-radio-group>
										</template>
										<br /><br />
										<div>
											<div class="z-form-group">
												<label for="city1" class="block bold">出发地</label>
												<el-input id="city1" placeholder="请输入出发地" style="width: 120px;" size="mini"></el-input>
											</div>
											<a href="javascript:;"><i class="fa fa-exchange" style="padding: 5px;"></i></a>
											<div class="z-form-group">
												<label for="city2" class="block bold">目的地</label>
												<el-input id="city2" placeholder="请输入目的地" style="width: 120px;" size="mini"></el-input>
											</div>
											<br />
											<div class="z-form-group">
												<label for="date1" class="block bold">出发日期</label>
												<el-date-picker type="date" placeholder="选择日期" size="mini">
												</el-date-picker>
											</div>
											<br />
											<div class="z-form-group">
												<label for="date1" class="block bold">乘客类型</label> 成人：
												<el-input-number v-model="num1" @change="handleChange" :min="1" :max="50" size="mini"></el-input-number>
												&nbsp;&nbsp;&nbsp;&nbsp; 儿童：
												<el-input-number v-model="num2" @change="handleChange" :min="0" :max="50" size="mini"></el-input-number>
											</div>
											<div style="margin-top: 10px;">
												<el-button type="warning" size="small">搜索</el-button>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</el-tab-pane>
						<el-tab-pane label="火车票">火车票</el-tab-pane>
						<el-tab-pane label="酒店">酒店</el-tab-pane>
						<el-tab-pane label="景点">景点</el-tab-pane>
						<el-tab-pane label="周边游">周边游</el-tab-pane>
						<el-tab-pane label="国内游">国内游</el-tab-pane>
						<el-tab-pane label="出境游">出境游</el-tab-pane>
						<el-tab-pane label="游轮">游轮</el-tab-pane>
					</el-tabs>
				</div>
			</el-row>
			<!-- 轮播图 end -->

			<!-- 浏览足迹 start -->
			<!-- TODO -->
			<!-- 浏览足迹 end -->

			<!-- 精选特辑 start -->
			<el-row type="flex" justify="center" id="choiceness">
				<el-col :sm="16" class="img-container">
					<h1 class="big-title">精选特惠</h1>
					<template>
						<el-tabs v-model="choicenessActiveName">
							<el-tab-pane label="热门推荐" name="first">
								<ul>
									<li class="prime">
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/choiceness/prime.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>4999</span> 起
														</div>
														<div class="intro">
															<p>【推荐】普吉岛4晚6日/5晚7日游</p>
															<span>出境游 · 沈阳出发</span>
														</div>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>4199</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>巴厘岛6晚8日半自助游</p>
													<div>
														<span>出境游</span>
														<span class="float-r">沈阳出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>4890</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>日本东京+大阪+京都+富士山6日/7日游</p>
													<div>
														<span>出境游</span>
														<span class="float-r">沈阳出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>3699</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>【皇家加勒比-海洋赞礼号】2018年4月26日天津-冲绳-香港6晚7日游</p>
													<div>
														<span>邮轮</span>
														<span class="float-r">天津出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>2299</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>【歌诗达-大西洋号】2017年12月21日天津-福冈-天津 5晚6天游</p>
													<div>
														<span>邮轮</span>
														<span class="float-r">天津出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>4454</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>三亚+蜈支洲岛+猴岛+天堂森林公园+天涯海角+南山双飞5日跟团游</p>
													<div>
														<span>国内游</span>
														<span class="float-r">沈阳出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>3578</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>桂林+阳朔+大漓江+龙脊梯田+银子岩+古东红枫+象鼻山双飞5日跟团游</p>
													<div>
														<span>国内游</span>
														<span class="float-r">沈阳出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>3384</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>昆明+大理+丽江三飞6日跟团游</p>
													<div>
														<span>国内游</span>
														<span class="float-r">沈阳出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>404</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>沈阳凯莱酒店+皇家海洋乐园/抚顺热高乐园</p>
													<div>
														<span>周边游</span>
														<span class="float-r">沈阳出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
								</ul>
							</el-tab-pane>
							<el-tab-pane label="周边自由行" name="second">
								<ul>
									<li class="prime">
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/choiceness/prime2.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>268</span> 起
														</div>
														<div class="intro">
															<p>沈阳森林动物园+沈阳龙之梦雅仕商务酒店</p>
															<span>周边游 · 沈阳出发</span>
														</div>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>4199</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>巴厘岛6晚8日半自助游</p>
													<div>
														<span>出境游</span>
														<span class="float-r">沈阳出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>4890</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>日本东京+大阪+京都+富士山6日/7日游</p>
													<div>
														<span>出境游</span>
														<span class="float-r">沈阳出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>3699</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>【皇家加勒比-海洋赞礼号】2018年4月26日天津-冲绳-香港6晚7日游</p>
													<div>
														<span>邮轮</span>
														<span class="float-r">天津出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>2299</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>【歌诗达-大西洋号】2017年12月21日天津-福冈-天津 5晚6天游</p>
													<div>
														<span>邮轮</span>
														<span class="float-r">天津出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>4454</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>三亚+蜈支洲岛+猴岛+天堂森林公园+天涯海角+南山双飞5日跟团游</p>
													<div>
														<span>国内游</span>
														<span class="float-r">沈阳出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>3578</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>桂林+阳朔+大漓江+龙脊梯田+银子岩+古东红枫+象鼻山双飞5日跟团游</p>
													<div>
														<span>国内游</span>
														<span class="float-r">沈阳出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>3384</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>昆明+大理+丽江三飞6日跟团游</p>
													<div>
														<span>国内游</span>
														<span class="float-r">沈阳出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>404</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>沈阳凯莱酒店+皇家海洋乐园/抚顺热高乐园</p>
													<div>
														<span>周边游</span>
														<span class="float-r">沈阳出发</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
								</ul>
							</el-tab-pane>
							<el-tab-pane label="周边跟团" name="third">周边跟团</el-tab-pane>
							<el-tab-pane label="国内游" name="fourth">国内游</el-tab-pane>
							<el-tab-pane label="境外游" name="fifth">境外游</el-tab-pane>
						</el-tabs>
					</template>
				</el-col>
			</el-row>
			<!-- 精选特辑 end -->

			<!-- 住酒店 start -->
			<el-row type="flex" justify="center" id="hotel">
				<el-col :sm="16" class="img-container">
					<h1 class="big-title">住酒店</h1>
					<template>
						<el-tabs v-model="hotelActiveName">
							<el-tab-pane label="沈阳" name="first">
								<ul>
									<li class="left-panel">
										<el-card :body-style="{ padding: '0px' }" class="bg-lightgreen" style="height: 100%;">
											<div>
												<h2>热门商圈</h2>
												<ul>
													<li>
														<a href="javascript:;">沈阳站,太原街</a>
													</li>
													<li>
														<a href="javascript:;">沈河区,中街</a>
													</li>
													<li>
														<a href="javascript:;">北站,惠工广场</a>
													</li>
													<li>
														<a href="javascript:;">沈北,大学城</a>
													</li>
													<li>
														<a href="javascript:;">北行,辽宁大学南校区</a>
													</li>
													<li>
														<a href="javascript:;">沈辽路,万达</a>
													</li>
													<li>
														<a href="javascript:;">浑南,奥体中心</a>
													</li>
													<li>
														<a href="javascript:;">皇姑区,北陵公园</a>
													</li>
													<li>
														<a href="javascript:;">沈河区,张氏帅府</a>
													</li>
													<li>
														<a href="javascript:;">沈河区,故宫</a>
													</li>
												</ul>
											</div>
											<div>
												<h2>价位</h2>
												<ul>
													<li>
														<a href="javascript:;">不限</a>
													</li>
													<li>
														<a href="javascript:;">150元以下</a>
													</li>
													<li>
														<a href="javascript:;">150-300元</a>
													</li>
													<li>
														<a href="javascript:;">300-450元</a>
													</li>
													<li>
														<a href="javascript:;">450-700元</a>
													</li>
													<li>
														<a href="javascript:;">700元以上</a>
													</li>
												</ul>
											</div>
											<div>
												<h2>超值优惠</h2>
												<ul>
													<li style="width: 100%;">
														<a href="javascript:;">
															<img class="circle" src="img/a8.jpg" />
															<span>更多国内酒店>></span><br />
														</a>
													</li>
												</ul>
											</div>
										</el-card>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>285</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>沈阳东方银座国际酒店</p>
													<div>
														<span>国内酒店</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>119</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>莫泰168(沈阳北站北出口店)</p>
													<div>
														<span>国内酒店</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>246</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>沈阳黎明国际酒店</p>
													<div>
														<span>国内酒店</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>161</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>锦江之星品尚(沈阳北站惠工广场店)</p>
													<div>
														<span>国内酒店</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>143</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>沈阳多多短租公寓</p>
													<div>
														<span>客栈民宿</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>209</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>沈阳途家盛捷鑫汇国际服务公寓</p>
													<div>
														<span>客栈民宿</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>190</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>沈阳斯维登服务公寓(首创自在天地)</p>
													<div>
														<span>客栈民宿</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a8.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>166</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>沈阳前景无限精品公寓</p>
													<div>
														<span>客栈民宿</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
								</ul>
							</el-tab-pane>
							<el-tab-pane label="抚顺" name="second">
								<ul>
									<li class="left-panel">
										<el-card :body-style="{ padding: '0px' }" class="bg-lightgreen" style="height: 100%;">
											<div>
												<h2>价位</h2>
												<ul>
													<li>
														<a href="javascript:;">不限</a>
													</li>
													<li>
														<a href="javascript:;">150元以下</a>
													</li>
													<li>
														<a href="javascript:;">150-300元</a>
													</li>
													<li>
														<a href="javascript:;">300-450元</a>
													</li>
													<li>
														<a href="javascript:;">450-700元</a>
													</li>
													<li>
														<a href="javascript:;">700元以上</a>
													</li>
												</ul>
											</div>
											<div>
												<h2>超值优惠</h2>
												<ul>
													<li style="width: 100%;">
														<a href="javascript:;">
															<img class="circle" src="img/a8.jpg" />
															<span>更多国内酒店>></span><br />
														</a>
													</li>
												</ul>
											</div>
										</el-card>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>378</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>抚顺友谊宾馆</p>
													<div>
														<span>国内酒店</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>119</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>莫泰168(沈阳北站北出口店)</p>
													<div>
														<span>国内酒店</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>246</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>沈阳黎明国际酒店</p>
													<div>
														<span>国内酒店</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>161</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>锦江之星品尚(沈阳北站惠工广场店)</p>
													<div>
														<span>国内酒店</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>143</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>沈阳多多短租公寓</p>
													<div>
														<span>客栈民宿</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>209</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>沈阳途家盛捷鑫汇国际服务公寓</p>
													<div>
														<span>客栈民宿</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>190</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>沈阳斯维登服务公寓(首创自在天地)</p>
													<div>
														<span>客栈民宿</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<el-card :body-style="{ padding: '0px' }">
												<div class="img-box">
													<img src="img/a9.jpg">
													<div class="intro-box">
														<div class="price bg-danger">
															<i>¥</i>
															<span>166</span> 起
														</div>
													</div>
												</div>
												<div class="detail">
													<p>沈阳前景无限精品公寓</p>
													<div>
														<span>客栈民宿</span>
													</div>
												</div>
											</el-card>
										</a>
									</li>
								</ul>
							</el-tab-pane>
							<el-tab-pane label="本溪" name="third">本溪</el-tab-pane>
							<el-tab-pane label="辽阳" name="fourth">辽阳</el-tab-pane>
							<el-tab-pane label="国际酒店" name="fifth">国际酒店</el-tab-pane>
						</el-tabs>
					</template>
				</el-col>
			</el-row>
			<!-- 住酒店 end -->

			<!-- 玩景点 start -->
			<el-row type="flex" justify="center" id="scenic">
				<el-col :sm="16" class="img-container">
					<div class="title-box">
						<h1>玩景点</h1>
					</div>
					<ul>
						<li class="left-panel">
							<el-card :body-style="{ padding: '0px' }" class="bg-lightgreen" style="height: 100%;">
								<div>
									<h2>热门城市</h2>
									<ul>
										<li>
											<a href="javascript:;">抚顺</a>
										</li>
										<li>
											<a href="javascript:;">本溪</a>
										</li>
										<li>
											<a href="javascript:;">营口</a>
										</li>
										<li>
											<a href="javascript:;">长春</a>
										</li>
										<li>
											<a href="javascript:;">锦州</a>
										</li>
										<li>
											<a href="javascript:;">大连</a>
										</li>
										<li>
											<a href="javascript:;">朝阳</a>
										</li>
										<li>
											<a href="javascript:;">葫芦岛</a>
										</li>
										<li>
											<a href="javascript:;">秦皇岛</a>
										</li>
										<li>
											<a href="javascript:;">哈尔滨</a>
										</li>
									</ul>
								</div>
								<div>
									<h2>主题活动</h2>
									<ul>
										<li>
											<a href="javascript:;">历史遗迹</a>
										</li>
										<li>
											<a href="javascript:;">名声古迹</a>
										</li>
										<li>
											<a href="javascript:;">自然风光</a>
										</li>
										<li>
											<a href="javascript:;">公园</a>
										</li>
										<li>
											<a href="javascript:;">山岳</a>
										</li>
										<li>
											<a href="javascript:;">影视基地</a>
										</li>
									</ul>
								</div>
								<div>
									<h2>超值优惠</h2>
									<ul>
										<li style="width: 100%;">
											<a href="javascript:;">
												<img src="img/a9.jpg" class="circle" />
												<span>更多国内景点>></span><br />
											</a>
										</li>
									</ul>
								</div>
							</el-card>
						</li>
						<li>
							<a href="javascript:;">
								<el-card :body-style="{ padding: '0px' }">
									<div class="img-box">
										<img src="img/a8.jpg">
										<div class="intro-box">
											<div class="price bg-danger">
												<i>¥</i>
												<span>75</span> 起
											</div>
										</div>
									</div>
									<div class="detail">
										<p>抚顺热高乐园</p>
										<div>
											<span>抚顺</span>
										</div>
									</div>
								</el-card>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<el-card :body-style="{ padding: '0px' }">
									<div class="img-box">
										<img src="img/a8.jpg">
										<div class="intro-box">
											<div class="price bg-danger">
												<i>¥</i>
												<span>58</span> 起
											</div>
										</div>
									</div>
									<div class="detail">
										<p>沈阳故宫</p>
										<div>
											<span>沈阳</span>
										</div>
									</div>
								</el-card>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<el-card :body-style="{ padding: '0px' }">
									<div class="img-box">
										<img src="img/a8.jpg">
										<div class="intro-box">
											<div class="price bg-danger">
												<i>¥</i>
												<span>98</span> 起
											</div>
										</div>
									</div>
									<div class="detail">
										<p>调兵山龙源温泉</p>
										<div>
											<span>铁岭</span>
										</div>
									</div>
								</el-card>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<el-card :body-style="{ padding: '0px' }">
									<div class="img-box">
										<img src="img/a8.jpg">
										<div class="intro-box">
											<div class="price bg-danger">
												<i>¥</i>
												<span>70</span> 起
											</div>
										</div>
									</div>
									<div class="detail">
										<p>沈阳森林动物园</p>
										<div>
											<span>沈阳</span>
										</div>
									</div>
								</el-card>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<el-card :body-style="{ padding: '0px' }">
									<div class="img-box">
										<img src="img/a8.jpg">
										<div class="intro-box">
											<div class="price bg-danger">
												<i>¥</i>
												<span>88</span> 起
											</div>
										</div>
									</div>
									<div class="detail">
										<p>花溪地温泉</p>
										<div>
											<span>沈阳</span>
										</div>
									</div>
								</el-card>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<el-card :body-style="{ padding: '0px' }">
									<div class="img-box">
										<img src="img/a8.jpg">
										<div class="intro-box">
											<div class="price bg-danger">
												<i>¥</i>
												<span>25</span> 起
											</div>
										</div>
									</div>
									<div class="detail">
										<p>沈飞航空博览园</p>
										<div>
											<span>沈阳</span>
										</div>
									</div>
								</el-card>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<el-card :body-style="{ padding: '0px' }">
									<div class="img-box">
										<img src="img/a8.jpg">
										<div class="intro-box">
											<div class="price bg-danger">
												<i>¥</i>
												<span>170</span> 起
											</div>
										</div>
									</div>
									<div class="detail">
										<p>皇家海洋乐园</p>
										<div>
											<span>沈阳</span>
										</div>
									</div>
								</el-card>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<el-card :body-style="{ padding: '0px' }">
									<div class="img-box">
										<img src="img/a8.jpg">
										<div class="intro-box">
											<div class="price bg-danger">
												<i>¥</i>
												<span>80</span> 起
											</div>
										</div>
									</div>
									<div class="detail">
										<p>沈阳怪坡国际滑雪场</p>
										<div>
											<span>沈阳</span>
										</div>
									</div>
								</el-card>
							</a>
						</li>
					</ul>
				</el-col>
			</el-row>
			<!-- 玩景点 end -->

			<!-- 游周边 start -->
			<el-row type="flex" justify="center" id="circum">
				<el-col :sm="16" class="img-container">
					<div class="title-box">
						<h1>游周边</h1>
					</div>
					<ul>
						<li class="left-panel">
							<el-card :body-style="{ padding: '0px' }" class="bg-lightgreen" style="height: 100%;">
								<div>
									<h2>热门城市</h2>
									<ul>
										<li>
											<a href="javascript:;">抚顺</a>
										</li>
										<li>
											<a href="javascript:;">本溪</a>
										</li>
										<li>
											<a href="javascript:;">营口</a>
										</li>
										<li>
											<a href="javascript:;">长春</a>
										</li>
										<li>
											<a href="javascript:;">锦州</a>
										</li>
										<li>
											<a href="javascript:;">大连</a>
										</li>
										<li>
											<a href="javascript:;">朝阳</a>
										</li>
										<li>
											<a href="javascript:;">葫芦岛</a>
										</li>
										<li>
											<a href="javascript:;">秦皇岛</a>
										</li>
										<li>
											<a href="javascript:;">哈尔滨</a>
										</li>
									</ul>
								</div>
								<div>
									<h2>游玩天数</h2>
									<ul>
										<li>
											<a href="javascript:;">四天三晚</a>
										</li>
										<li>
											<a href="javascript:;">三天两晚</a>
										</li>
										<li>
											<a href="javascript:;">两天一晚</a>
										</li>
										<li>
											<a href="javascript:;">一天一晚</a>
										</li>
									</ul>
								</div>
								<div>
									<h2>超值优惠</h2>
									<ul>
										<li style="width: 100%;">
											<a href="javascript:;">
												<img src="img/a9.jpg" class="circle" />
												<span>更多周边景点>></span><br />
											</a>
										</li>
									</ul>
								</div>
							</el-card>
						</li>
						<li class="prime">
							<a href="javascript:;">
								<el-card :body-style="{ padding: '0px' }">
									<div class="img-box">
										<img src="img/choiceness/prime3.jpg">
										<div class="intro-box">
											<div class="price bg-danger">
												<i>¥</i>
												<span>205</span> 起
											</div>
											<div class="intro">
												<p>【懒人出行】
													<东方明珠-浦江游轮-上海博物馆-外滩观光隧道-城隍庙>1日跟团游 纯玩无购物，上海出发</p>
												<span>上海 -上海 · 跟团游</span>
											</div>
										</div>
									</div>
								</el-card>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<el-card :body-style="{ padding: '0px' }">
									<div class="img-box">
										<img src="img/a8.jpg">
										<div class="intro-box">
											<div class="price bg-danger">
												<i>¥</i>
												<span>988</span> 起
											</div>
										</div>
									</div>
									<div class="detail">
										<p>舒适的滑雪体验优选的酒店服务享受低价高品质度假长白山万达智选假日酒店2天1晚双人自助早餐尊享长白山机场接机礼遇</p>
										<div>
											<span>白山</span>
											<span class="float-r">自由行</span>
										</div>
									</div>
								</el-card>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<el-card :body-style="{ padding: '0px' }">
									<div class="img-box">
										<img src="img/a8.jpg">
										<div class="intro-box">
											<div class="price bg-danger">
												<i>¥</i>
												<span>329</span> 起
											</div>
										</div>
									</div>
									<div class="detail">
										<p>大连圣亚海洋世界/大连森林动物园/老虎滩海洋公园+大连星海城际客缘酒店</p>
										<div>
											<span>大连</span>
											<span class="float-r">自由行</span>
										</div>
									</div>
								</el-card>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<el-card :body-style="{ padding: '0px' }">
									<div class="img-box">
										<img src="img/a8.jpg">
										<div class="intro-box">
											<div class="price bg-danger">
												<i>¥</i>
												<span>268</span> 起
											</div>
										</div>
									</div>
									<div class="detail">
										<p>入住景区内伏尔加庄园客房游玩哈尔滨伏尔加庄园</p>
										<div>
											<span>哈尔滨</span>
											<span class="float-r">自由行</span>
										</div>
									</div>
								</el-card>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<el-card :body-style="{ padding: '0px' }">
									<div class="img-box">
										<img src="img/a8.jpg">
										<div class="intro-box">
											<div class="price bg-danger">
												<i>¥</i>
												<span>368</span> 起
											</div>
										</div>
									</div>
									<div class="detail">
										<p>住上海麟臻大酒店游上海迪士尼乐园/上海野生动物园享免费迪士尼接送服务自选浦东机场送机</p>
										<div>
											<span>上海</span>
											<span class="float-r">自由行</span>
										</div>
									</div>
								</el-card>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<el-card :body-style="{ padding: '0px' }">
									<div class="img-box">
										<img src="img/a8.jpg">
										<div class="intro-box">
											<div class="price bg-danger">
												<i>¥</i>
												<span>180</span> 起
											</div>
										</div>
									</div>
									<div class="detail">
										<p>
											<杭州湾海底温泉+鸣鹤古镇>巴士1日跟团游 高品质温泉真正的海底温泉，全世界仅有的！汗蒸、石板浴、矿砂浴统统免费体验，还有各种特色表演免费看！</p>
										<div>
											<span>上海 - 宁波</span>
											<span class="float-r">跟团游</span>
										</div>
									</div>
								</el-card>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<el-card :body-style="{ padding: '0px' }">
									<div class="img-box">
										<img src="img/a8.jpg">
										<div class="intro-box">
											<div class="price bg-danger">
												<i>¥</i>
												<span>138</span> 起
											</div>
										</div>
									</div>
									<div class="detail">
										<p>
											<大禹谷徒步-娘娘山穿越，长乐林场红杉枫香，甘岭湖野餐>1日跟团游 赏秋意阑珊，冲顶娘娘山，金秋特惠来袭</p>
										<div>
											<span>上海 - 杭州</span>
											<span class="float-r">跟团游</span>
										</div>
									</div>
								</el-card>
							</a>
						</li>
					</ul>
				</el-col>
			</el-row>
			<!-- 游周边 end -->

			<!-- 旅行服务 start -->
			<el-row type="flex" justify="center" id="travel-service">
				<el-col :sm="16" class="img-container">
					<div class="title-box">
						<h1>旅行服务</h1>
					</div>
					<el-row :gutter="20" id="service">
						<el-col :span="8">
							<div class="service-item">
								<img src="img/service/service1.png" />
								<div>
									<p>出境WIFI/电话卡</p>
									<span>随身wifi，随时随地分享，方便携带</span>
								</div>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="service-item">
								<img src="img/service/service2.png" />
								<div>
									<p>签证</p>
									<span>专业顾问一对一服务，出签成功率99.8%</span>
								</div>
							</div>
						</el-col>
						<el-col :span="8">
							<div class="service-item">
								<img src="img/service/service3.png" />
								<div>
									<p>保险</p>
									<span>买一份保险，买一份保障和安心</span>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<!-- 旅行服务 end -->

			<!-- 页脚 start -->
			<footer>
				<!-- 底部 start -->
				<el-row>
					<el-col :span="24" id="bottom-box">
						<el-row type="flex" justify="center" id="">
							<el-col :sm="4" class="bottom-item">
								<img src="img/bottom/bottom1.png" />
								<span>价格公正，安心购买</span>
							</el-col>
							<el-col :sm="4" class="bottom-item">
								<img src="img/bottom/bottom2.png" />
								<span>品质保证，放心出行</span>
							</el-col>
							<el-col :sm="4" class="bottom-item">
								<img src="img/bottom/bottom3.png" />
								<span>产品丰富，一站式服务</span>
							</el-col>
							<el-col :sm="4" class="bottom-item">
								<img src="img/bottom/bottom4.png" />
								<span>专业顾问，24小时客服</span>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
				<!-- 底部 end -->
				<el-row type="flex" justify="center">
					<el-col :sm="16">
						<span>Copyright &copy; 2017 - 2018 版权所有 沈阳畅星软件有限公司</span>
					</el-col>
				</el-row>
			</footer>
			<!-- 页脚 end -->
		</div>
	</body>

	<script type="text/javascript">
		new Vue({
			el: '#container',
			data: {
				activeIndex: '1',
				num1: 1,
				num2: 0,
				choicenessActiveName: 'first',
				hotelActiveName: 'first',
				guoneiRadio: 1,
				guojiRadio: 1
			},
			methods: {
				handleSelect(key, keyPath) {
					console.log(key, keyPath);
				},
				handleOpen(key, keyPath) {
					console.log(key, keyPath);
				},
				handleClose(key, keyPath) {
					console.log(key, keyPath);
				},
				handleChange(value) {
					console.log(value);
				}
			}
		})

		var cityPicker = new HzwCityPicker({
			data: data,
			target: 'city-choice',
			valType: 'k-v',
			hideCityInput: {
				name: 'city',
				id: 'city'
			},
			hideProvinceInput: {
				name: 'province',
				id: 'province'
			},
			callback: function() {

			}
		});

		cityPicker.init();
	</script>

</html>